<template>
	<view class="content">
		<view class="viewHead">
		</view>
		<view class="viewTitle">
			<view class="viewStatic">
				<view class="viewDesc">
					<image :src="storeDetail.avatar||errorImage" mode="" class="imageLogo"></image>
					<view class="desc">
						<view class="viewName">{{storeDetail.name}}</view>
						<view class="viewSend">
							<span>
								<image src="../../static/images/time.png" class="imageSpan" /> 距离1.5km
							</span>
							<span>
								<image src="../../static/images/money.png" class="imageSpan" /> 配送费6元
							</span>
							<span>
								<image src="../../static/images/location.png" class="imageSpan" /> 预计时长12min
							</span>
						</view>

					</view>

				</view>
				<view class="address">
					<uni-notice-bar :text="storeDetail.note" :scrollable="true"></uni-notice-bar>
					<!-- 简介:{{storeDetail.description}} -->
				</view>
			</view>
		</view>
		<!-- 分类导航 -->
		<view class="classify-list">

			<!-- 左侧分类导航 -->
			<scroll-view scroll-y="true" class="left">
				<view class="row" v-for="(item,index) in categoryList" :key="index"
					:class="[index == showClassifyIndex ? 'active' : '']"
					@click="tapClassify(index,item.id,item.type)">
					<view class="text">
						<view class="block" :class="'bg-' + themeColor.name"></view>
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<!-- 右侧分类导航 -->
			<scroll-view scroll-y="true" class="right">
				<view v-for="(item, index) in categoryList" :key="index">
					<view v-if="index === showClassifyIndex" class="classify">
						<view class="" v-if="foodList !== 0">
							<!-- 标题 -->
							<!-- <view class="item-title unify-weight">{{item.title}}</view> -->

							<view class="item-subclass unify-relative" v-for="(item2,index2) in foodList" :key="index2" v-model="foodList">
								<view class="item-subclass-ice unify-flex" @tap="tapGoodsDetails(item2)">
									<view class="item-left">
										<image class="item-left-image" :src="item2.image || errorImage" mode="">
										</image>
									</view>
									<view class="item-right">
										<view class="item-right-con">
											<view class="item-right-name unify-weight unify-font-size-line-astrict">
												{{item2.name}}
											</view>
											<view class="item-right-desc unify-font-size-two-line-astrict">
												{{item2.description}}
											</view>
											<view class="item-right-price unify-absolute unify-flex">
												<view class="item-price unify-weight" :class="'tf-' + themeColor.name">
													<text class="item-price-iden">{{moneySymbol}}</text>
													{{item2.price /100}}
												</view>
											</view>
										</view>
									</view>
								</view>

								<uni-goods-add-subtract :data="item2" :index="index" :index2="index2" :absolute="true"
									bottom="10rpx" right="40rpx" @minus="tapNumber"
									@add="tapNumber"></uni-goods-add-subtract>
							</view>

							<!-- 间隔 -->
							<view style="height: 60px" v-if="goodsNum > 0"></view>
						</view>
						<view class="no-data" v-else>
							<image class="iconfont" :src="iconRight" mode="widthFix"></image>
							暂无分类
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<uni-goods-add-subtract-animation :show="isCartIcon"
			:cartItemElc="cartItemElc"></uni-goods-add-subtract-animation>

		<!-- 购物车 -->
		<uni-shopping-trolley ref="uniShoppingTrolley" :show="show" :cartItemElc="cartItemElc" :isCartIcon="isCartIcon"
			:num="goodsNum" :totalPrice="totalPrice" :isMinus="isMinus" :list="carData"
			@updateIsCartIcon="updateIsCartIcon" @updateCartItemElc="updateCartItemElc">
		</uni-shopping-trolley>

		<!-- 自定义模态框 -->
		<uni-show-modal ref="uniShowModal" :show="isShowModal"></uni-show-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeId: null,
				windowHeight: this.windowHeight, // 屏幕高度
				statusBarHeight: this.statusBarHeight, // 状态栏
				errorImage: this.$mAssetsPath.errorImage,
				iconRight: this.$mAssetsPath.iconRight,
				moneySymbol: this.$mConstDataConfig.moneySymbol,
				appName: this.$mSettingConfig.appName,
				isPress: 1, // 判断当前返回次数
				show: false, // 购物车是否显示
				isShowModal: false,
				isCartIcon: false, // 动画标
				cartItemElc: { // 坐标
					left: 0,
					top: 0
				},
				carData: [], //购物车内容
				goodsNum: 0, // 购物车数量
				totalPrice: 0, // 商品总价
				isMinus: 0, // 判断是否减操作
				showClassifyIndex: 0, // 一级菜单高亮显示序号
				// new
				categoryList: [{
					type: 1
				}],
				foodList: [],
				storeDetail: {},
				userBg: this.$mAssetsPath.userBg,
			}
		},
		onLoad(options) {
			this.storeId = options.id
			
			
		},
		onReady() {
			this.initData()
			this.getCartData()
		},
		computed:{
			t(){
				this.countTotalPrice()
			}
			
		},
		methods: {
			initData() {
				this.getCategory()
				this.getStoreDetail()
			},

			// 商品详情
			tapGoodsDetails(e) {
				this.$openPage({
					name: 'goodsDetails',
					query: {
						data: e
					}
				})
			},

			// 点击分类
			tapClassify(index, categoryId, type) {
				console.log(type+"111")

				this.showClassifyIndex = index;
				if (type === 1) {
					this.getDishList(categoryId)
				} else {
					this.getSetmealList(categoryId)
				}
			},
			// 点击商品数量加减 1减  2加
			tapNumber(e, type, index, index2, item2) {
				// let ca = this.classifyList;
				this.isMinus = type; // 判断是否减操作  1减  2加
				switch (type) {
					case 1:
						const param = {
							 //口味  如果没有传undefined
							dishId: item2.id, //菜品id这里默认是传的菜品后端在进行修改
							storeId: item2.storeId
						}
						this.$https({
							url: '/car/sub',
							method: "post",
							data: param,
							success: (res) => {
								if (res.code === 20000) {
									this.foodList.forEach(dish => {
										if (dish.id === item2.id) {
											dish.number = (res.data.number === 0 ? undefined : res.data.number)
										
										}
									}) 
								} else {
									item2.number = (res.data.number === 0 ? undefined : res.data.number)
									
								}
								this.countTotalPrice() // 回调计算总价
								this.getCartData()
							}
						})
						let goodsNum = this.goodsNum
						goodsNum--
						if (goodsNum === 0) {
							// console.log("进来了")
							this.show = false;
							setTimeout(() => {
								this.$refs.uniShoppingTrolley.isCartShow() // 回调组件isCartShow方法
							}, 1)
						}
						break
					case 2:
						this.show = true;

						const params = {
							amount: item2.price / 100, //金额
							dishFlavor: item2.dishFlavor, //口味  如果没有传undefined
							dishId: item2.id, //菜品id这里默认是传的菜品后端在进行修改
							setmealId: undefined, //套餐id
							name: item2.name,
							image: item2.image,
							storeId: item2.storeId
						}
						this.$https({
							url: '/car/add',
							method: "post",
							data: params,
							success: (res) => {
								
								if (res.code === 20000) {
									this.foodList.forEach(dish => {
										if (dish.id === item2.id) {
											dish.number = res.data.number
										}
									}) 
									// console.log(this.carData)
								} else {
									item2.number = res.data.number
									
								}
								this.countTotalPrice()
								this.getCartData()
							}
						})

						// classifyList[index].goods_list[index2].goods_number++
						this.cartItemElc.left = e.touches[0].pageX - 15; // 自由调动位置
						this.cartItemElc.top = e.touches[0].pageY - 40;
						setTimeout(() => {
							// this.goodsNum++ 
							
							// 回调计算总价
							this.$refs.uniShoppingTrolley.isCartShow() // 回调组件isCartShow方法
						}, 20)
						break
					default:
						break
				}
				// this.classifyList = classifyList;
			},

			// 计算商品总价
			countTotalPrice() {
				let price = 0,
					totalNum = 0,
					cartData = this.carData
				cartData.forEach((item2, index2) => {
					totalNum +=Number(item2.number)
					price += Number(item2.number) * item2.amount
				})
				

				this.totalPrice = price;
				this.goodsNum = totalNum
			},

			// 更新动画标状态  默认false
			updateIsCartIcon(e) {
				this.isCartIcon = e;
			},

			// 更新cartItemElc坐标移动
			updateCartItemElc(e) {
				this.cartItemElc = e;
			},

			// 模态框affirm
			tapModalAffirm() {

			},
			// 获取分类
			getCategory() {
				this.$https({
					url: '/category/list',
					method: "get",
					data: {
						storeId: this.storeId,
					},
					success: (res) => {
						this.categoryList = res.data
						if (this.categoryList[0].type == 1) {
							this.getDishList(this.categoryList[0].id)
							//用下面的代码强制更显
							this.$forceUpdate()
						} else {
							this.getSetmealList(this.categoryList[0].id)
						}
					}
				})
			},
			// 获取菜品列表
			getDishList(categoryId) {
				this.$https({
					url: '/dish/list',
					method: "get",
					data: {
						storeId: this.storeId,
						categoryId: categoryId
					},
					success: (res) => {
						let foodList = res.data
						const carData = this.carData
						// console.log(carData)
						if (foodList != null && carData != null) {
							foodList.forEach(dish => {
								carData.forEach(cart => {
									if (dish.id === cart.setmealId) {
										dish.number = cart.number
									}
								})
							})
						}
						this.foodList = foodList
						
						console.log(foodList)
					}
				})
			},
			// 获取套餐列表
			getSetmealList(categoryId) {
				this.$https({
					url: '/setmeal/list',
					method: "get",
					data: {
						storeId: this.storeId,
						categoryId: categoryId
					},
					success: (res) => {
						let foodList = res.data
						const carData = this.carData
						// console.log(carData)
						if (foodList != null && carData != null) {
							foodList.forEach(dish => {
								carData.forEach(cart => {
									if (dish.id === cart.setmealId) {
										dish.number = cart.number
									}
								})
							})
						}
						this.foodList = foodList
					}

				})
			},
			// 获取当前店铺信息
			getStoreDetail() {
				this.$https({
					url: '/store/one',
					method: "get",
					data: {
						storeId: this.storeId
					},
					success: (res) => {
						this.storeDetail = res.data
					}

				})


			},

			// 获取购物车内容todo
			getCartData() {
				this.$https({
					url: "/car/list",
					method: "get",
					data: {
						storeId: this.storeId
					},
					success: (res) => {
						this.carData = res.data
					}

				})
			}

		},
		// #ifdef APP-PLUS
		onBackPress(e) {
			uni.showModal({
				content: '确定要退出程序？',
				success: res => {
					if (res.confirm) {
						// 退出当前应用，改方法只在App中生效
						plus.runtime.quit();
					}
				}
			})
			return true;
		}
		// #endif

		// 获取分类列表

	}
</script>

<style lang="scss" scoped>
	/* new */

	.viewHead {
		width: 100%;
		height: 300rpx;
		background-position: center;
		/** 居中*/
		background-repeat: no-repeat;
		/** 不重复*/
		background-size: contain;
		/**等比例缩放*/
		background-image: url('');
	}

	.viewTitle {
		width: 100%;
		height: 300rpx;
		opacity: 1;
		display: flex;
		position: absolute;
		top: 90rpx;
		z-index: 10;

		.viewStatic {
			width: 345px;
			height: 300rpx;
			margin: 15rpx auto;
			box-shadow: 0rem 2rem 5rem 0rem rgba(69, 69, 69, 0.1);
			justify-content: center;
			// display: flex;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0rem 2rem 5rem 0rem rgba(69, 69, 69, 0.1);
			position: relative;

			.viewDesc {
				width: 100%;
				height: 100rpx;

				.imageLogo {
					width: 100rpx;
					height: 100rpx;
					margin-top: 20px;
					margin-left: 10px;
				
					border-radius: 20rpx;
					display: flex;
					float: left;
				}

				.desc {
					width: 200px;
					height: 100px;
					float: left;

					.viewName {
						display: flex;
						margin-top: 20px;
						width: 300px;
						height: 60rpx;
						font-size: 20px;
						margin-left: 20rpx;

					}

					.viewSend {
						width: 300px;
						height: 30px;
						margin-top: 10rpx;
						margin-left: 20rpx;
						clear: both;
						font-size: 12px;

						.imageSpan {
							width: 12px;
							height: 12px;
						}

					}

				}


			}

			.address {
				width: 300px;
				height: 50px;
				justify-self: center;
				position: absolute;
				top: 85px;
				left: 20px;
			}
		}


	}

	/* 模块分类 */
	.classify-list {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		display: flex;
		position: absolute;
		top: 430rpx;
		/* #ifdef APP-PLUS */
		// padding-top: 150rpx);
		/* #endif */
		bottom: 0;

		.left {
			width: 24%;
			left: 0rpx;
			background-color: #f8f8f8;

			.row {
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;

				.text {
					width: 100%;
					position: relative;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					color: #3c3c3c;

					.block {
						position: absolute;
						width: 0rpx;
						left: 0rpx;
					}
				}

				&.active {
					height: 100rpx;
					background-color: #FFFFFF;

					.text {
						font-size: 30rpx;
						font-weight: 600;
						color: #2d2d2d;

						.block {
							width: 6rpx;
							height: 100%;
							left: 10rpx;
						}
					}
				}
			}
		}

		.right {
			width: 76%;
			left: 24%;
			background-color: #fff;

			.classify {
				width: 100%;
				padding: 0 20rpx 0;
				padding-top: 10rpx;

				// 标题
				.item-title {
					line-height: 86rpx;
					font-size: $uni-font-size-base;
				}

				.item-subclass {
					margin-bottom: 40rpx;

					.item-subclass-ice {

						.item-left {

							.item-left-image {
								width: 180rpx;
								height: 180rpx;
								border-radius: 10rpx;
							}
						}

						.item-right {
							width: 65%;
							height: 180rpx;

							.item-right-con {
								height: inherit;
								margin: 10rpx 30rpx 10rpx 20rpx;

								.item-right-name {
									font-size: $uni-font-size-base;
								}

								.item-right-desc {
									font-size: $uni-font-size-sm;
									color: $uni-text-color-grey;
									margin-top: 10rpx;
								}

								.item-right-price {
									width: 57%;
									bottom: 10rpx;
									justify-content: space-between;

									.item-price {

										.item-price-iden {
											font-size: $uni-font-size-sm;
											font-weight: 500;
										}

										.item-original-price {
											font-size: $uni-font-size-sm;
											margin-left: 5rpx;
											font-weight: 500;
											color: $uni-text-color-grey;
											text-decoration: line-through;
										}
									}
								}
							}
						}
					}

					.item-operation {
						width: max-content;
						align-items: center;
						bottom: 10rpx;
						right: 50rpx;

						.item-number {
							width: 50rpx;
							text-align: center;
							font-size: $uni-font-size-base;
						}

						.iconfont {
							font-size: 40rpx;
						}
					}
				}

				.no-data {
					margin: 48rpx 0;
					color: #909399;
					display: flex;
					justify-content: center;
					align-items: center;

					.iconfont {
						margin-right: 20rpx;
						width: 50rpx;
						height: 52rpx;
					}
				}
			}
		}
	}
</style>